<template>
	<view class="m-walletcard" :style="{'--main-color-1':configInfo.mainColor,'--main-color-2':configInfo.mainColor1,'--btn-color':configInfo.btnColor}">
		<view class="flex-between" style="flex-wrap: nowrap;align-items: center;">
			<view class="left">
				<view class="u-desc" v-if="type == 'money'">{{$t('m_walletcard.on-account')}}<text v-if=" configInfo.money_company">（{{ configInfo.money_company }}）</text></view>
				<view class="u-desc" v-if="type == 'integral'">{{$t('m_walletcard.on-account')}}<text v-if=" configInfo.integral_company">（{{ configInfo.integral_company }}）</text></view>
				<view class="u-num number" >
					{{ num }}
				</view>
			</view>
			<view class="right">
				<view class="flex-between">
					<view class="u-btn" v-if="rightBT" @click="btnClick()">{{rightBT}}</view>
					<view class="u-btn" v-if="rightBTtwo" @click="btnTwoClick()">{{rightBTtwo}}</view>
				</view>
			</view>
		</view>
<!-- 		<image src="/static/bg-jinbi.png"></image> -->
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		name:"m-walletcard",
		props: ['type','num','rightBT','rightBTtwo','rightBP','rightBPtwo'],
		data() {
			return {
			};
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
		}),
		mounted(){
			// this.setting = uni.getStorageSync('_config');
		},
		methods:{
			btnClick(){
				if(this.rightBP){
					uni.navigateTo({
						url:this.rightBP
					});
				}
			},
			btnTwoClick(){
				if(this.rightBPtwo){
					uni.navigateTo({
						url: this.rightBPtwo
					});
				}
			}
			
		}
	}
</script>

<style lang="scss">
	.m-walletcard{
		background: #fff;
		color: #3f2a17;
		padding: 10px 15px;
		border-radius: 10px;
		box-shadow: 0px 5px 10px #F3F3F3; 
		position: relative;
		overflow: hidden;
		.u-num{
			font-weight: bold;
			font-size: 60rpx;
			color: var(--main-color-2);
		}
		.u-btn{
			font-size: 26rpx;
			padding: 5px 10px;
			border-radius: 25px;
			z-index: 2;
			position: relative;
			color: var(--btn-color);
			background-color: var(--main-color-1);
		}
		.u-btn:nth-child(2){
			margin-left: 5px;
			
			// background-color: $incolor-4;
		}
		.u-desc{
			font-size: 28rpx;
			margin: 5px 0;
		}
	}
	.m-walletcard::before{
		position: absolute;
		content: '';
		width: 100px;
		height: 30px;
		background: linear-gradient(90deg, var(--main-color-1) , #ffffff);;
		border-radius: 50px;
		transform:rotate(-30deg); 
		right: -40px;
		top: -30px;
		opacity: .3;
	}
	.m-walletcard:after{
		position: absolute;
		content: '';
		width: 100px;
		height: 30px;
		background: linear-gradient(90deg, var(--main-color-1) , #ffffff);;
		border-radius: 50px;
		transform:rotate(-30deg); 
		right: -20px;
		bottom: 15px;
		opacity: .5;
	}
</style>
